<template>
    <div>
        <div class="left">
            <li>
            <a @click="click1">行业资讯</a>
        </li>
        <li>
            <a @click="click2">公司新闻</a>
        </li>
        </div>
        <div class="right1" v-if="msg==1">
            <router-view />
            <Right1 />
        </div>
        <div class="right2" v-if="msg==2">
            <router-view />
            <Right2 />
        </div>
    </div>
</template>

<script>
import Right1 from '@/components/Right1.vue'
import Right2 from '@/components/Right2.vue'
export default({
    created () {
        this.msg=1;
        watch: {
            msg:{
                if(this.$route.query.d){
                    this.msg=this.$route.query.d;
                }
            }
        }
    },
    data () {
        return {
            msg:'',
            d:'',
        }
    },
    methods: {
        click1(){
            this.$router.push({path:'/news',query:{id:1}}).catch(err => {});
            this.msg=1;
        },
        click2(){
            this.$router.push({path:'/news',query:{id:2}}).catch(err => {});
            this.msg=2
        },
    },
    components: {
        Right1,
        Right2,
    },
    $route(){
        console.log(this.$router);
    },
})
</script>


<style scoped lang="scss">
    .left{
        float: left;
         width: 30%;
        li{
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
        }
    }
    .right1,right2{
        width:70%;
        float: left;
    }
    // .right2{
    //     // display:none;
    // }
</style>